<template>
    <div ref="actionGroupArea">
        <div v-if="actions.rules.length > 0" class="actions-area">
            <div class="condition" v-if="actions.rules.length > 1" v-bind:style="{top: conditionTop + 'px'}">
                <a-button class="condition-button" v-on:click="switchCondition()" v-bind:style="{ marginTop: conditionMargin+'px', marginBottom: conditionMargin+'px' }">{{ actions.condition === 'AND' ? '且' : '或' }}</a-button>
            </div>
            <div>
                <UserAction v-for="(action, index) in actions.rules" :key="action.key" v-bind:events="events" v-bind:measures="measures" v-bind:properties="properties" v-bind:index="index" v-bind:rules="actions.rules" v-bind:datasourceId="datasourceId"></UserAction>
            </div>
        </div>
    </div>
</template>

<script>
    import UserAction from './UserAction'
    import {getDay} from "@/utils/util";
    export default {
        name: "UserActionGroup",
        components:{
            UserAction
        },
        props: {
            actions: Object,
            events: Array,
            properties: Array,
            measures: Array,
            datasourceId: Number
        },
        data: function () {
            return {
                show: true,
                conditionMargin: 0,
                conditionTop: 26,
                normalItemHeight: 42,
                conditionButtonHeight: 28,
                padding: 10,
                filterItemHeight:[]
            }
        },
        methods: {
            getRandomIndex: function(index) {
                return new Date().getTime()+""+index;
            },
            switchCondition: function() {
                if(this.actions.condition === 'AND') {
                    this.actions.condition = 'OR';
                } else {
                    this.actions.condition = 'AND';
                }
            },
            addItem: function() {
                this.actions.rules.push({
                    key: Math.random().toString(36).substr(2),
                    done: true,
                    type: 'event_rule',
                    time: {
                        type: 'absolute_time',
                        values: [
                            getDay(-7),
                            getDay(0)
                        ]
                    },
                    event: this.events[0].name,
                    measure: {
                        name: this.measures[0].name,
                        value: this.measures[0].value
                    },
                    operator: 'equal',
                    values:[0],
                    filter: {
                        condition: 'AND',
                        rules: []
                    }
                });
                this.updateConditionHeight();
            },
            removeItem: function(index) {
                this.actions.rules.splice(index, 1);

                this.filterItemHeight.splice(index, 1);
                this.updateConditionHeight();
            },
            updateFilterItemHeight: function(index, height)  {
                this.filterItemHeight[index] = height;
                this.updateConditionHeight();
                // console.log(this.filterItemHeight);
            },
            updateConditionHeight: function() {
                this.$nextTick(()=>{
                    if(this.filterItemHeight.length >= 2) {
                        this.conditionMargin = (this.$refs.actionGroupArea.offsetHeight - this.padding * 2 - (this.filterItemHeight[0] - this.padding) / 2 - (this.filterItemHeight[this.filterItemHeight.length-1] - this.padding) / 2 - this.conditionButtonHeight) / 2;
                    }
                    if(this.filterItemHeight.length >= 2) {
                        this.conditionTop = (this.filterItemHeight[0] - this.padding) / 2 + this.padding;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .actions-area {
        background-color: rgb(247, 247, 247);
        /*margin-left: 10px;*/
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        display: block;
        padding-left: 50px;
        position: relative;
    }
    .condition {
        /*display: inline-block;*/
        width: 25px;
        position: absolute;
        border-width: 1px 0px 1px 1px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color:  #54ba52;
        border-bottom-color:  #54ba52;
        border-left-color:  #54ba52;
        border-image: initial;
        /*top: 26px;*/
        left: 26px;
        border-right-style: initial;
        border-right-color: initial;
        /*z-index: 999;*/
        display: block;
    }
    .condition-button {
        padding: 4px 7px;
        margin-left: -15px;
        border: 1px solid rgb(200, 200, 200);
        background-color: rgb(245, 245, 245);
        border-radius: 3px;
        cursor: pointer;
    }
</style>
